<!--  -->
<template>
    <div class="qcode flex justify-center aligin-center">
         <img class="qr" id="qr-img" :src="dataUrl" alt="邀请二维码">
    </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  components: {},
  data() {
    return {
        dataUrl:""
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    let img = document.getElementById("qr-img");
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      //用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
      QRCode.toCanvas(
        canvas,
        "https://cdn.weile999.com/chanel/index.html?ADTAG=894.1112",
        error => {
          if (error) {
            console.log(error);
          } else {
            this.dataUrl = canvas.toDataURL("image/jpeg");
          }
        }
      );
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.qcode{
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    .qr{
        height: 200px;
        width: 200px;
    }
}
</style>